<template>
  <div style="border: 1px solid red">
    <div>
      父组件: {{count}} provide:{{num}}， provide-obj:{{obj}} 
      <button @click="remove">移除事件</button> 
      <button @click="count++">修改爷爷的数据</button>
      <button @click="num++">修改provide提供的数据</button>
      <button @click="obj.num2++">修改provide--obj提供的数据</button>
    </div>
    <div class="app">
      <MyFormVue />
      <MyTableVue :count="count" />
    </div>
  </div>
</template>

<script>
// 导入 注册  使用
import MyFormVue from './components/MyForm.vue'
import MyTableVue from './components/MyTable.vue'
import eventbus from './utils/eventbus'

export default {
  components: {
    MyFormVue,
    MyTableVue
  },
  // 爷爷组件提供provide数据，孙子组件 注入inject数据
  provide(){
    return {
      // 如果注入的是普通数据类型，那么就不是响应式的
      num: this.num,
      // 如果注入的是复杂数据类型，那么数据就是响应式的
      obj: this.obj
    }
  },
  data(){
    return {
      count: 100,
      num: 10000,
      obj: {
        num2: 900
      }
    }
  },
  created() {
    eventbus.$on('UPDATE_COUNT', (e) => {
      console.log('我是在父组件里面监听的：', e);
    })
    // $once表示只监听一次，然后就移除事件
    // eventbus.$once('UPDATE_COUNT', (e) => {
    //   console.log('我是在父组件里面监听的：', e);
    // })
  },
  methods: {
    remove() {
      eventbus.$off('UPDATE_COUNT')
    }
  }
}
</script>

<style scoped>
.app {
  padding: 15px;
  display: flex;
}
</style>